import React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import {routes} from './router';
import PrivateRoute from './components/PrivateRoute';
import Layout from './components/Layout';
import Login from './pages/Login';
import RoomStatus from './pages/RoomStatus'

const TitleComponent = ({item}) => {
  if (!item) {
    document.title = '工作台';
    return <RoomStatus />;
  }
  document.title = item.meta.title;
  return <item.component></item.component>;
};

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />}></Route>
        <Route
          path="/"
          element={
            <PrivateRoute>
              {' '}
              <Layout />{' '}
            </PrivateRoute>
          }
        >
          <Route
            index
            element={<TitleComponent item={null}></TitleComponent>}
          ></Route>
          {routes.map((item, index) => (
            <Route
              path={item.path}
              key={index}
              exact
              element={<TitleComponent item={item}></TitleComponent>}
            ></Route>
          ))}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
